{% extends 'IcsocUIBundle::page.html.twig' %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@jqgird_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
    <style>
        .btn-padding{margin: 5px 0 0 8px !important}
    </style>
{% endblock %}
{% block content %}
    <div class="col-xs-12">
        <div class="widget-box">
            <div class="widget-header widget-header-flat">
                <h4 class="widget-title">{{ 'Skill group'|trans }}</h4>
                <div class="widget-toolbar no-border">
                    <button class="btn btn-xs btn-light bigger" onclick="javascript:window.history.go(-1)">
                        <i class="ace-icon fa fa-arrow-left"></i>
                        {{ 'return'|trans }}
                    </button>
                </div>
            </div>
            <div class="widget-body">
                <div class="widget-main">
                    <div class="btn-group" data-toggle="buttons" id="que-button">
                        {% for key,que in queues %}
                            <label class="btn btn-{% if key == que_id %}danger{% else %}success{% endif %} btn-padding {% if key == que_id %}active{% endif %}" onclick="distribution({{ key }})" >
                                <input type="radio" name="options"  autocomplete="off"  value="{{ key }}">
                                <span id="text_{{ key }}">{{ que }}</span>&nbsp;&nbsp;&nbsp;
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/><br/>
    <div class="col-xs-12">
        <div class="widget-box">
            <div class="widget-body">
                <div class="widget-main">
                    <table class="table table-striped table-bordered table-hover">
                        <tr>
                            <td class="left">
                                <label>{{ 'Keyword'|trans }}:</label>&nbsp;&nbsp;<input type="text"  name="agent_key" id="agent_key" class="input-sm agent_search" data-rel="tooltip"  data-placement="bottom" data-original-title="{{ 'Supports name, job number search agents'|trans }}" />
                                <button id="loading-btn" type="button" class="btn btn-sm btn-info" data-loading-text="Loading..." onclick="searchAgent('agent_key')">
                                    <i class="ace-icon fa fa-search"></i>{{ 'Inquiry'|trans }}
                                </button>
                            </td>
                            <td></td>
                            <td>
                                <label>{{ 'Keyword'|trans }}:</label>&nbsp;&nbsp;<input type="text" name="assign_key"  id="assign_key"   class="input-sm agent_search" data-rel="tooltip"  data-placement="bottom" data-original-title="{{ 'Supports name, job number search agents'|trans }}" />
                                <button id="loading-btn" type="button" class="btn btn-sm btn-info" data-loading-text="Loading..." onclick="searchAgent('assign_key')">
                                    <i class="ace-icon fa fa-search"></i>{{ 'Inquiry'|trans }}
                                </button>
                            </td>
                        </tr>
                        <tr class="center">
                            <td>{{ 'Seating list'|trans }}</td>
                            <td>{{ 'actions'|trans }}</td>
                            <td>{{ 'Assigned to the skill set of table'|trans }}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-5" id="table-width">
                                <table id="grid-agent"></table>
                            </td>
                            <td class="center col-sm-2 align-center">
                                <p><button type="button" id="button_add" class="btn btn-white" onclick="add()">{{ 'Add'|trans }}-->></button></p>
                                <p><button type="button" id="button_del" class="btn btn-white" onclick="del()"><<--{{ 'Delete'|trans }}</button></p>
                            </td>
                            <td class="col-sm-5">
                                <table id="grid-assign"></table>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="objstr" value="" />
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqgird_js'
    '@gritter_js'
    '@common_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        var queId = '';
        $(document).ready(function(){
            distribution({{ que_id }});
            $(window).triggerHandler('resize.jqGrid');//触发resize.jagrid事件；
        });
        $(window).on('resize.jqGrid', function () {
            $('#grid-agent').jqGrid( 'setGridWidth', $("#table-width").width());
            $('#grid-assign').jqGrid( 'setGridWidth', $("#table-width").width());
        });
        function distribution(que_id) {
            queId = que_id;
            jQuery("#grid-agent").jqGrid({
                url:'{{ path('icsoc_queue_get_agent') }}?que_id='+queId,
                mtype: 'post',
                datatype: 'json',
                height:'400',
                colNames: ['','{{ 'Username'|trans }}','{{ 'Agent number'|trans }}'],
                multiselect:true,
                rownumbers:true,
                rowNum:1000,
                colModel:[
                    {name:'ag_id',index:'ag_id', key:true, hidden:true,fixed:true,editable: true, sortable:false},
                    {name:'ag_name',index:'ag_name', width:190,editable: true, sortable:false},
                    {name:'ag_num',index:'ag_num', width:190,editable: true, sortable:false}
                ],
                loadComplete:function(){
                    disabeldButton(0);
                }
            });
            var lastsel2;
            jQuery("#grid-assign").jqGrid({
                url:'{{ path('icsoc_queue_get_assign_agent') }}?que_id='+queId,
                mtype: 'post',
                height:'400',
                rownumbers:true,
                datatype: 'json',
                colNames: ['ag_id','{{ 'Username'|trans }}','{{ 'Agent number'|trans }}','{{ 'Skill level'|trans }}',''],
                multiselect:true,
                editurl: '{{ path('icsoc_queue_update_skill') }}',
                rowNum:1000,
                colModel:[
                    {name:'ag_id',index:'ag_id', key:true, hidden:true,fixed:true,editable: false, sortable:false},
                    {name:'ag_name',index:'ag_name', width:190,editable: false, sortable:false},
                    {name:'ag_num',index:'ag_num', width:190,editable: false, sortable:false},
                    {name:'skill',index:'skill', width:190,editable: true, sortable:false,editrules:{number:true,required:true}},
                    {name:'aqid',index:'aqid', hidden:true,fixed:true,editable: true, sortable:false}
                ],
                onSelectRow: function (id) {
                    if (id && id!==lastsel2) {
                        jQuery('#grid-assign').jqGrid('restoreRow', lastsel2);
                        jQuery('#grid-assign').jqGrid('editRow', id, true);
                        $("input[id^='"+id+"_skill']","#grid-assign").bind('blur',function(){
                            $('#grid-assign').saveRow(id);
                        });
                        lastsel2 = id;
                    }
                },
                loadComplete:function(){
                    disabeldButton(0);
                }
            });
            $('#agent_key').val('');
            $('#assign_key').val('');
            var agentPost = {'que_ids':que_id, 'keyword':''};
            var assignPost = {'que_ids':que_id, 'keyword':''};
            $('#grid-agent').setGridParam({postData:agentPost}).trigger("reloadGrid");
            $('#grid-assign').setGridParam({postData:assignPost}).trigger("reloadGrid");
            $('#que-button > label').attr('class', 'btn btn-success btn-padding');
            $('#text_'+que_id).parent().attr('class', 'btn btn-danger btn-padding');
        }

        function add()
        {
            var agId = getIds("#grid-agent");
            if (agId == 0) {
                return ;
            }
            disabeldButton(1);
            $.ajax({
                type: 'post',
                url: "{{ path('icsoc_queue_action_fast_assign_agent') }}",
                data: 'ids='+agId+"&que_id="+queId+'&flag=1',
                success: function (res) {
                    showRes(res);
                    refresGrid();
                }
            });
        }

        function del()
        {
            var agId = getIds("#grid-assign");
            if (agId == 0) {
                return ;
            }
            disabeldButton(1);
            $.ajax({
                type: 'post',
                url: "{{ path('icsoc_queue_action_fast_assign_agent') }}",
                data: 'ids='+agId+"&que_id="+queId+'&flag=2',
                success: function (res) {
                    showRes(res);
                    refresGrid();
                }
            });
        }
        function showRes(res)
        {
            if (res.error) {
                gritterAlert('{{ 'Prompt'|trans }}',res.message, 'error');
            } else {
                gritterAlert('{{ 'Prompt'|trans }}', '{{ 'Action success'|trans }}', 'success');
            }
        }
        function getIds(id) {
            if (!queId) {
                gritterAlert('{{ 'Prompt'|trans }}','{{ 'Please select the skill set'|trans }}', 'error');
                return 0;
            }
            var ids = $(id).jqGrid('getGridParam','selarrrow');
            //alert(ids.length);
            if(ids.length <= 0){
                gritterAlert('{{ 'Prompt'|trans }}','{{ 'Please check the data'|trans }}', 'error');
                return 0;
            }
            var agId = '';
            for (var i=0; i < ids.length; i++) {
                var row = $(id).jqGrid('getRowData', ids[i]);
                agId+= row.ag_id+',';
            }
            agId = agId.substr(0, agId.length-1);
            return agId;
        }
        function refresGrid()
        {
            $('#grid-agent').trigger("reloadGrid");
            $('#grid-assign').trigger("reloadGrid");
        }

        function disabeldButton(flag){
            if (flag == 1) {
                //禁用
                $('#button_add').attr("class", "btn btn-white disabled");
                $('#button_del').attr("class", "btn btn-white disabled");
            } else {
                //启用
                $('#button_add').attr("class", "btn btn-white");
                $('#button_del').attr("class", "btn btn-white");
            }
        }

        function searchAgent(id) {
            var val,url,grid = '' ;
            if (id == 'agent_key') {
                val = $('#agent_key').val();
                grid = '#grid-agent';
            } else {
                val = $('#assign_key').val();
                grid = '#grid-assign';
            }
            {#if (val.length < 1) {#}
                {#gritterAlert("{{ 'Prompt'|trans }}", '{{ 'Please fill in the key words'|trans }}', 'error');#}
                {#return ;#}
            {#}#}
            var arr = {"keyword":val};
            $(grid).setGridParam({postData:arr}).trigger("reloadGrid");
        }
        $(document).ready(function() {
            $('.agent_search').keydown(function(event){
                if(event.keyCode == 13){
                    var id = $(this).attr("id");
                    if (id == 'agent_key' || id == 'assign_key') {
                        searchAgent(id);
                    }
                }
            });
        });
        $(document).ready(function(){
            $('.agent_search').tooltip();
        })
    </script>
{% endblock %}